body {
background-color: #fff;
    .index {
        width: 10rem;
        // height: 133.32rem;
        margin: auto;

        // 输入框  头部
        .header {
            width: 10rem;
            // height: 7.12rem;
            background-image: linear-gradient(180deg, #f24c59 0%, #f28c4c 100%);

            .inp-top {
                display: flex;
                width: 10rem;

                .inp {
                    width: 7.9467rem;
                    height: .8533rem;
                    margin: 1.0267rem 0 0 .4267rem;
                    background-color: #ffffff;
                    border-radius: 2.48rem;

                    input {
                        display: block;
                        width: 7.9467rem;
                        height: .8533rem;
                        border-radius: 2.48rem;
                        outline: none;
                        border: none;
                        text-indent: 1.24rem;
                        font-size: .3733rem;
                    }

                    img {
                        display: block;
                        position: relative;
                        top: -0.64rem;
                        left: .64rem;
                        width: .3733rem;
                        height: .3733rem;
                    }
                }

                .xiaoxi {
                    height: .8533rem;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    margin: 1.12rem 0 0 .4267rem;

                    span {
                        height: .4267rem;
                        font-size: .2133rem;
                        display: block;
                        color: #fff;
                        text-align: center;
                        transform: scale(.8);
                        text-align: left;
                    }

                    b {
                        display: block;
                        position: relative;
                        top: -0.90rem;
                        right: -0.2rem;
                        width: .48rem;
                        height: 1.5rem;
                        color: #fff;
                        font-size: .1733rem;
                        transform: scale(.9);
                        font-weight: normal;
                        text-align: center;
                        background-color: #f49641;
                        border-radius: .32rem;
                    }

                    img {
                        width: .4267rem;
                        height: .4267rem;
                    }
                }
            }

            // nav导航
            .nav {
                margin: .3467rem 0 0 0;
                width: 10rem;
                height: .5867rem;
                overflow-x: scroll;

                &::-webkit-scrollbar {
                    display: none;
                    /*隐藏滚动条*/
                }

                ul {
                    width: 20rem;
                    height: .5867rem;
                    display: flex;

                    li {
                        width: 1.6rem;
                        height: .5867rem;
                        line-height: .6rem;
                        margin: 0 .2667rem 0 .2667rem;
                        box-sizing: border-box;
                        font-weight: 400;
                        font-size: .3333rem;
                        text-align: center;

                        a {
                            color: #fff;
                        }

                    }

                    li:nth-child(1) {
                        &::after {
                            position: relative;
                            top: -0.0667rem;
                            left: 0;
                            content: '';
                            width: 35%;
                            height: .0133rem;
                            display: block;
                            margin: 0 auto;
                            border-bottom: .0267rem solid rgb(255, 255, 255);
                        }
                    }
                }
            }

            .banner {
                width: 9.1733rem;
                height: 3.3067rem;
                margin: .2667rem auto;
                background-color: #fff;
                border-radius: .2667rem;

                img {
                    display: block;
                    width: 9.1733rem;
                    height: 3.3067rem;
                }
            }
        }

        // 十个小图
        .shi-img {
            width: 9.1733rem;
            height: 3.7867rem;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            margin: .2667rem auto 0;
            background-color: #ffffff;
            border-radius: .2667rem;
            box-shadow: 0px 0px .2667rem rgba(114, 114, 114, 0.16);

            li {
                width: 1.28rem;
                height: 1.5333rem;
                margin: 0 .2667rem;
                display: flex;
                flex-wrap: wrap;

                .img {
                    width: 1.28rem;
                    height: 1.2533rem;

                    img {
                        display: block;
                        width: 1.28rem;
                        height: 1.2533rem;
                    }
                }

                span {
                    margin: -0.3333rem 0 0 0;
                    height: .2667rem;
                    width: 1.28rem;
                    display: block;
                    font-size: .32rem;
                    text-align: center;
                }
            }
        }

        // 新人专享
        .xinren {
            width: 9.1733rem;
            height: 4.8rem;
            display: flex;
            margin: .2667rem auto .2667rem;
            background-color: #ffffff;
            border-radius: .2667rem;
            box-shadow: 0px 0px .16rem rgba(82, 82, 82, 0.16);

            .left {
                position: relative;
                width: 4.2667rem;
                height: 4.3467rem;
                margin: .24rem .2133rem 0 .2133rem;
                border-radius: .16rem;
                background-color: red;

                .img {
                    width: 4.2667rem;
                    height: 4.3467rem;

                    img {
                        width: 4.2667rem;
                        height: 4.3467rem;
                        display: block;
                    }
                }

                .left-p1 {
                    position: absolute;
                    top: .2133rem;
                    left: .4533rem;
                    height: .56rem;
                    font-family: PingFang SC;
                    font-weight: 600;
                    color: #ffffff;
                    font-size: .4rem;
                }

                .left-p2 {
                    position: absolute;
                    top: .7733rem;
                    left: .7467rem;
                    height: .3733rem;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #eae8f2;
                    font-size: .2667rem;
                }
            }

            .right {
                margin: .24rem .2133rem 0 0;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                width: 4.2667rem;
                height: 4.3467rem;
                border-radius: .16rem;
                background-color: pink;

                .top {
                    position: relative;
                    width: 4.2667rem;
                    height: 2.1333rem;
                    background-color: red;
                    border-radius: .16rem;

                    .img {
                        width: 4.2667rem;
                        height: 2.1333rem;

                        img {
                            display: block;
                            width: 4.2667rem;
                            height: 2.1333rem;
                        }
                    }

                    .top-p1 {
                        position: absolute;
                        top: .2133rem;
                        left: .2rem;
                        font-family: PingFang SC;
                        font-weight: 600;
                        color: #ffffff;
                        font-size: .4rem;
                    }

                    .top-p2 {
                        position: absolute;
                        top: .7467rem;
                        left: .2rem;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                        font-size: .2667rem;
                    }

                    .top-p3 {
                        position: absolute;
                        top: 1.36rem;
                        left: .2rem;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                        font-size: .2667rem;
                    }
                }

                .bottom {
                    width: 320px;
                    height: 156px;
                    border-radius: 12px;

                    .top-p1 {
                        position: absolute;
                        top: .2133rem;
                        left: .2rem;
                        font-family: PingFang SC;
                        font-weight: 600;
                        color: #3557ca;
                        font-size: .4rem;
                    }

                    .top-p2 {
                        position: absolute;
                        top: .7467rem;
                        left: .2rem;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #3557ca;
                        font-size: .2667rem;
                    }

                    .top-p3 {
                        position: absolute;
                        top: 1.36rem;
                        left: .2rem;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #3557ca;
                        font-size: .2667rem;
                    }

                }
            }
        }

        // 限时秒杀
        .miaosha {
            margin: 0 auto .2667rem;
            width: 9.1733rem;
            height: 3.7333rem;
            background-color: #ffffff;
            border-radius: .2667rem;
            box-shadow: 0px 0px .16rem rgba(111, 111, 111, 0.16);

            // 限时秒杀  时间
            .xian-top {
                overflow: hidden;
                width: 9.1733rem;
                display: flex;
                justify-content: space-between;
                background-image: linear-gradient(180deg, #f24c5a50 0%, rgba(242, 140, 76, 0) 100%);
                border-radius: .2667rem .2667rem 0rem 0px;
                box-shadow: 0px 0px .16rem rgba(196, 196, 196, 0.075);
                border-bottom: 0;

                .top-sp1 {
                    display: block;
                    margin: .3467rem 0 0 .4267rem;
                    width: 1.7067rem;
                    height: .5867rem;
                    font-family: PingFang SC;
                    font-weight: 600;
                    color: #202020;
                    font-size: .4267rem;
                }

                .top-sp2 {
                    margin: .3467rem 0 0 0px;
                    display: block;
                    display: flex;
                    width: 2.6667rem;
                    height: .4rem;

                    // 热卖
                    span {
                        display: block;
                        margin: .0133rem .0667rem;
                        width: .64rem;
                        height: .3733rem;

                        img {
                            display: block;
                            width: .64rem;
                            height: .3733rem;
                        }

                    }

                    .shi {
                        font-size: .24rem;
                        height: .4rem;
                        line-height: .4rem;
                        display: flex;

                        span {
                            display: block;
                            width: .4rem;
                            height: .3733rem;
                            color: #fff;
                            font-size: .24rem;
                            text-align: center;
                            background-color: #000000;
                            border-radius: .0533rem;
                            opacity: 1;

                        }
                    }
                }
            }

            // 人气好货
            .xian-zhong {
                margin: 0 0 0 .4533rem;
                height: .4267rem;
                font-family: PingFang SC;
                font-weight: 500;
                color: #b0b8c2;
                font-size: .2933rem;
            }

            // 水果标图
            .xian-bottom {
                width: 7.6rem;
                height: 2.08rem;
                margin: auto;

                ul {
                    display: flex;
                    justify-content: space-between;

                    li {
                        width: 1.6rem;
                        height: 2.08rem;
                        display: flex;
                        flex-wrap: wrap;

                        img {
                            width: 1.6rem;
                            height: 1.6rem;
                            display: block;
                        }

                        span {
                            margin: 0 0 0 -0.0933rem;
                            width: 1.6rem;
                            text-align: center;
                            display: block;
                            height: .4267rem;
                            font-family: PingFang SC;
                            font-weight: 600;
                            color: #ff6200;
                            font-size: .2933rem;
                        }
                    }
                }
            }
        }

        // 美食图片
        .meishi {
            width: 9.1733rem;
            height: 2.6133rem;
            margin: 0 auto .2933rem;
            border-radius: .2667rem;
            background-color: #fff;
            box-shadow: 0px .08rem .16rem rgba(0, 0, 0, 0.16);

            img {
                display: block;
                width: 9.1733rem;
                height: 2.6133rem;
            }
        }

        // 周四工作餐
        .zhousi {
            width: 9.1733rem;
            height: 3.68rem;
            margin: auto;
            display: flex;
            justify-content: space-around;
            border-radius: .2133rem .2133rem 0px 0px;
            background-color: #fff;

            .zhousi-left {
                position: relative;
                width: 4.6667rem;
                height: 3.68rem;
                border-radius: .2133rem 0px 0px 0px;

                .img {
                    width: 4.6667rem;
                    height: 3.68rem;

                    img {
                        display: block;
                        width: 4.6667rem;
                        height: 3.68rem;
                    }
                }

                span {
                    position: absolute;
                    top: .3467rem;
                    left: .48rem;
                    display: block;
                    width: 2.1333rem;
                    height: .5867rem;
                    text-shadow: 0px 0px .0533rem rgba(77, 33, 0, 0.16);
                    font-family: PingFang SC;
                    font-weight: 600;
                    color: #000000;
                    font-size: .4267rem;
                }

                span:nth-child(2) {
                    display: block;
                    position: absolute;
                    top: 1.0133rem;
                    left: .48rem;
                    height: .4533rem;
                    line-height: .4533rem;
                    font-size: .2667rem;
                    color: #fff;
                    text-align: center;
                    font-weight: normal;
                    background-color: #ffa500;
                    border-radius: .3733rem;
                }
            }

            .zhousi-right {
                position: relative;
                width: 4.6667rem;
                height: 3.68rem;
                border-radius: 0px .2133rem 0px 0px;

                .img {
                    width: 4.6667rem;
                    height: 3.68rem;

                    img {
                        display: block;
                        width: 4.6667rem;
                        height: 3.68rem;
                    }
                }

                span {
                    position: absolute;
                    top: .3467rem;
                    left: .48rem;
                    display: block;
                    width: 2.1333rem;
                    height: .5867rem;
                    text-shadow: 0px 0px .0533rem rgba(77, 33, 0, 0.16);
                    font-family: PingFang SC;
                    font-weight: 600;
                    color: #000000;
                    font-size: .4267rem;
                }

                span:nth-child(2) {
                    display: block;
                    position: absolute;
                    top: 1.0133rem;
                    left: .48rem;
                    height: .4533rem;
                    line-height: .4533rem;
                    font-size: .2667rem;
                    color: #fff;
                    text-align: center;
                    font-weight: normal;
                    background-color: rgba(165, 25, 25, 1);
                    border-radius: .3733rem;
                }
            }
        }

        // 榜单
        .bang {
            width: 9.1733rem;
            height: 3.2rem;
            overflow: hidden;
            margin: 0 auto .32rem;

            ul {
                display: flex;
                justify-content: space-between;

                li {
                    width: 2.1333rem;
                    height: 3.2rem;
                    background-color: #fff;

                    .bang-sp1 {
                        display: block;
                        margin: .2667rem 0 0 .3733rem;
                        width: .8533rem;
                        height: .5867rem;
                        font-family: PingFang SC;
                        font-weight: 600;
                        color: #262626;
                        font-size: .4267rem;
                    }

                    .bang-div1 {
                        display: block;
                        margin: .2rem 0 0 .3733rem;
                        // width: 1.2rem;
                        padding: 0 .0667rem;
                        height: .4533rem;
                        line-height: .4533rem;
                        text-align: center;
                        font-size: .2933rem;
                        color: rgba(244, 150, 65, 1);
                        border: .0133rem solid;
                        border-color: #f49641;
                        border-radius: .0533rem;
                    }

                    .img {
                        width: 2.0133rem;
                        height: 2.0133rem;
                        margin: .4667rem 0 0 .8rem;

                        img {
                            width: 1.3333rem;
                            height: 1.3333rem;
                            display: block;
                        }
                    }
                }

                li:nth-child(1) {
                    border-radius: 0 0 0 .2667rem;
                }

                li:nth-child(4) {
                    border-radius: 0 0 .2667rem 0;
                }
            }
        }

        // 商品 手机
        .shangpin {
            width: 9.1733rem;
            margin: auto;
            border-radius: .2667rem;
            box-shadow: 0px 0px .16rem rgba(139, 139, 139, 0.3);

            ul {
                width: 9.1733rem;
                margin: auto;
                display: flex;
                overflow: hidden;
                justify-content: space-between;

                .li-left {
                    width: 4.48rem;
                    

                    .li1 {
                        margin: 0 0 .2133rem 0;
display: block;
                        width: 4.48rem;
                        height: 6.8rem;
                        border-radius: .2667rem;
                        box-shadow: 0px 0px .16rem rgba(139, 139, 139, 0.3);

                        .img0 {
                            display: block;
                            width: 4.48rem;
                            height: 4.48rem;
                            border-radius: .2667rem .2667rem 0px 0px;
                        }


                        .p1 {
                            margin: .2667rem 0 0 .2133rem;
                            width: 4.1867rem;
                            height: 1.0667rem;
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: #3d444d;
                            font-size: .3733rem;
                        }

                        .p2 {
                            justify-content: space-around;
                            display: flex;
                            align-items: center;

                            span:nth-child(1) {
                                font-family: PingFang SC;
                                font-weight: 600;
                                color: #eb5f3e;
                                font-size: .48rem;
                                margin: 0px 0 0 -0.1333rem;
                            }

                            span:nth-child(2) {
                                display: block;
                                font-family: PingFang SC;
                                color: #c0c5cc;
                                font-size: .32rem;
                            }
                        }
                    }
                }

                .li-right {
                    width: 4.48rem;
                    // height: 118.7867rem;

                    .li2 {
                        margin: 0 0 .2133rem 0;
                        width: 4.48rem;
                        height: 7.84rem;
                        border-radius: .2667rem;
                        box-shadow: 0px 0px .16rem rgba(155, 155, 155, 0.3);

                        .img0 {
                            width: 4.48rem;
                            height: 4.48rem;
                            border-radius: .2667rem .2667rem 0px 0px;
                        }

                        .p1 {
                            margin: 0 0 0 .1333rem;
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: #3d444d;

                            span:nth-child(1) {
                                width: .6933rem;
                                height: .32rem;
                                padding: 0 .2rem;
                                color: #fff;
                                background-color: #eb5f3e;
                                border-radius: .16rem;
                                font-size: .2133rem;
                            }

                            span:nth-child(2) {
                                width: 4.0267rem;
                                height: 1.0667rem;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #3d444d;
                                font-size: .36rem;
                            }
                        }

                        .p2 {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin: .0533rem 0 0 .16rem;

                            span:nth-child(1) {
                                width: 1.2rem;
                                height: .6667rem;
                                font-family: PingFang SC;
                                font-weight: 600;
                                color: #eb5f3e;
                                font-size: .48rem;
                            }

                            span:nth-child(2) {
                                width: 1.6rem;
                                height: .4533rem;
                                font-family: PingFang SC;
                                color: #c0c5cc;
                                font-size: .32rem;
                            }
                        }

                        .img1 {
                            margin: .1333rem 0 0 .2667rem;

                            img {
                                display: block;
                                width: 1.9733rem;
                                height: .4267rem;
                            }
                        }
                    }
                }
            }
        }
    }
}